<template>
  <div class="SJSCTJ">
    <el-card class="box-card _body">
      <div slot="header">
        <span style="font-weight: 700; font-size: 20px">数据上传统计</span>
      </div>
      <div class="query">
        机构

        <el-select
          v-model="query.orgCode"
          clearable
          filterable
          placeholder="请选择"
          size="small"
        >
          <el-option
            v-for="item in OrganList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
        数据类型
        <el-select
          v-model="query.typeId"
          clearable
          filterable
          placeholder="请选择"
          size="small"
        >
          <el-option
            v-for="item in TypeList"
            :key="item.typeId"
            :label="item.typeName"
            :value="item.typeId"
          >
          </el-option>
        </el-select>
        日期
        <el-date-picker
          size="small"
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="time_change"
        >
        </el-date-picker>
        <el-button
          size="small"
          icon="el-icon-search"
          style="margin-left: 10px"
          type="primary"
          @click="getList"
        ></el-button>
        <el-button size="small" @click="goto" type="success">同步</el-button>
      </div>
      <div class="main">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%; margin-top: 10px"
          stripe
          border
          height="600"
          v-loading="isLoading"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="机构名称" prop="orgName"> </el-table-column>
          <el-table-column prop="quantityAll" label="累计总数">
          </el-table-column>
          <el-table-column
            prop="quantityCorrect"
            label="累计成功数"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="quantityError" label="累计失败数">
          </el-table-column>
          <el-table-column prop="name" label="选项" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="info(scope.row)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 二层穿透 -->
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <el-table
        ref="multipleTable"
        :data="listInfo"
        tooltip-effect="dark"
        style="width: 100%"
        stripe
        border
        height="550"
      >
        <el-table-column label="表名" prop="tableDescription">
        </el-table-column>
        <el-table-column label="表Code" prop="tableName"> </el-table-column>
        <el-table-column prop="quantityAll" label="累计总数"> </el-table-column>
        <el-table-column
          prop="quantityCorrect"
          label="累计成功数"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="quantityError" label="累计失败数">
        </el-table-column>
        <!-- <el-table-column prop="name" label="选项" width="100">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="info(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div class="page" style="text-align: right">
        <span style="float: left">总共 {{ total }} 条记录</span>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total"
          @current-change="page_change"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      moreQuery: false,
      tableData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "",
      query: {
        orgCode: "",
        typeId: "",
        startTime: "",
        endTime: "",
      },
      currentPage: 1,
      pageSize: 15,
      total: 0,
      TypeList: [],
      OrganList: [],
      dialogVisible: false,
      listInfo: [],
      isLoading: false,
    };
  },
  mounted() {
    this.getTypeList();
    this.getOrganList();
  },
  methods: {
    getTypeList() {
      this.$get(baseUrl.qmjkzkIp + "/T1/api/v1/Platform/Data/TypeList").then(
        (res) => {
          this.TypeList = res.data;
        }
      );
    },
    getOrganList() {
      this.$get(baseUrl.qmjkzkIp + "/T1/api/v1/Platform/Data/OrganList").then(
        (res) => {
          this.OrganList = res.data;
        }
      );
    },
    getList() {
      this.isLoading = true;
      var init = JSON.stringify(this.query);
      let body = JSON.parse(init);
      body.typeId = body.typeId ? body.typeId : "-1";
      this.$post(
        baseUrl.qmjkzkIp + "/T1/api/v1/Platform/Data/DataUploadList",
        body
      ).then((res) => {
        if (res.code != 200) {
          this.$message.error(res.message);
          this.isLoading = false;
          return;
        }
        this.tableData = res.data;
        this.isLoading = false;
      });
    },
    time_change(val) {
      this.query.startTime = val[0];
      this.query.endTime = val[1];
      this.getList();
    },
    info(val) {
      let dyOrgCode = val.dyOrgCode;
      this.dyOrgCode = dyOrgCode;
      this.getListInfo(dyOrgCode);
    },
    getListInfo(dyOrgCode) {
      var query2 = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        filter: this.query,
      };
      query2.filter.orgCode = dyOrgCode;
      var init = JSON.stringify(query2);
      let body = JSON.parse(init);
      body.filter.typeId = body.filter.typeId ? body.filter.typeId : "-1";
      this.$post(
        baseUrl.qmjkzkIp + "/T1/api/v1/Platform/Data/DataUploadDetailList",
        body
      ).then((res) => {
        this.dialogVisible = true;
        this.listInfo = res.data.list;
        this.total = res.data.total;
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.listInfo = [];
      this.currentPage = 1;
    },
    goto() {
      this.$router.push("/SystemManagement/SJCJ");
    },
    page_change(val) {
      this.currentPage = val;
      this.getListInfo(this.dyOrgCode);
    },
  },
};
</script>

<style scoped>
.SJSCTJ {
  padding: 10px;
}
._body {
  height: 90vh;
}
</style>
